<template>
  <div class="container">

    <div class="tabsWrapper">
      <el-scrollbar ref="scrollbarRef" wrap-class="scrollbar-wrapper">
    <el-tabs v-model="activeTab" type="vertical" tab-position="left">
      <el-tab-pane v-for="(tab, index) in tabs"
                   :label="tab.label"
                   :name="tab.name"
                   :key="index" />
    </el-tabs>
      </el-scrollbar>
    </div>

    <div class="cardsWrapper">
      <div class="search-wrapper">
        <el-input
            v-model="searchText"
            placeholder="请输入搜索内容"
            prefix-icon="el-icon-search"
            clearable
            @clear="handleClear"
            @keyup.enter="handleSearch"
        />
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
      <el-pagination
          background
          @current-change="handlePageChange"
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="filteredCards.length"
          class="pagination"
      >
      </el-pagination>

      <el-card
          v-for="(card, index) in currentCards"
          :key="index"
          class="box-card"
      >
        <div class="card-content">
          <div class="image-wrapper">
            <img :src="card.image" class="card-image" alt="Card Image" />
          </div>
          <div class="text-wrapper">
            <div class="card-title">{{ card.content }}</div>
            <div class="card-metadata">{{ card.address }}</div>
            <div class="card-metadata">{{ card.contact }}</div>
            <div class="card-metadata">{{ card.description }}</div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref, computed } from "vue";
import logo from '@/assets/logo.png'

export default {
  setup() {
    const tabs = ref([
      { label: 'All',name: ['all'] },
      { label: '内科', name: ['1'], },
      { label: '外科', name: ['2'],},
      { label: '妇产科', name: ['3'], },
      { label: '儿科', name: ['4'], },
      { label: '皮肤科', name: ['5'], },
      { label: '眼科', name: ['6'], },
      { label: '耳鼻喉科', name: ['7'], },
      { label: '口腔科', name: ['8'], },
      { label: '泌尿科', name: ['9'], },
      { label: '骨科', name: ['10'], },
      { label: '心血管科', name: ['11'], },
      { label: '神经科', name: ['12'], },
      { label: '消化内科', name: ['13'], },
      { label: '呼吸内科', name: ['14'], },
      { label: '内分泌科', name: ['15'], },
      { label: '肾内科', name: ['16'], },
      { label: '血液科', name: ['17'], },
      { label: '肝胆外科', name: ['18'], },
      { label: '神经外科', name: ['19'], },
      { label: '胸外科', name: ['20'], },
      { label: '心脏外科', name: ['21'], },
      { label: '整形外科', name: ['22'], },
      { label: '普外科', name: ['23'], },
      { label: '肛肠科', name: ['24'], },
      { label: '放射科', name: ['25'], },
      { label: '放疗科', name: ['26'], },
      { label: '麻醉科', name: ['27'], },
      { label: '病理科', name: ['28'], },
      { label: '感染科', name: ['29'], },
      { label: '康复医学科', name: ['30'], },
      { label: '中医科', name: ['31'], },
      { label: '特需门诊', name: ['32'], },
      { label: '新生儿科', name: ['33'], },
      { label: '小儿外科', name: ['34'], },
      { label: '小儿呼吸科', name: ['35'], },
      { label: '小儿神经外科', name: ['36'], },
      { label: '中医内科', name: ['37'], },
      { label: '中医外科', name: ['38'], },
      { label: '中医妇科', name: ['39'], },
      { label: '中医肿瘤科', name: ['40'], },
      { label: '中医消化科科', name: ['41'], },
      { label: '肿瘤科', name: ['42'], },
      { label: '针灸推拿', name: ['43'], },
      { label: '中西医结合', name: ['44'], },
    ]);
    const cards = ref([
      { content: '孙景贤教授',
        tabs: ['11'],
        image:logo,
        address:"辽宁省大连市沙河口区友谊街3号",
        contact:"电话：0411-83635999",
        description:"中山医院心内科主任医师,擅长领域：心血管疾病、冠心病、心力衰竭等。",
      },
      { content: '何东燕教授',
        tabs: ['12'],
        image:logo,
        address:"大连市中山区人民路222号",
        contact:"电话：0411-62913893",
        description:"大连医科大学附属第一医院神经内科医生,擅长领域：脑卒中、头痛、癫痫等神经内科疾病",
      },
      { content: '张霞教授',
        tabs: ['13'],
        image:logo,
        address:"大连市中山区康复路466号",
        contact:"电话：0411-83699999",
        description:"大连市中心医院消化内科主任,擅长领域：胃肠道疾病、消化道肿瘤等。",
      },
      { content: '张延礼教授',
        tabs: ['4','33','34','35','36'],
        image:logo,
        address:"大连市西岗区南沙河街30号",
        contact:"电话：0411-62822800",
        description:"大连市儿童医院儿科主任,擅长领域：小儿呼吸疾病、小儿消化科疾病等。",
      },
      { content: '王新会教授',
        tabs: ['37','41'],
        image:logo,
        address:"大连市中山区木兰街55号",
        contact:"电话：0411-39922777",
        description:"大连市中医院中医内科主任医师,擅长领域：中医内科疾病、中西医结合治疗等。",
      },
      { content: '刘伟教授',
        tabs: ['9'],
        image:logo,
        address:"辽宁省大连市中山区五一路465号",
        contact:"电话：0411-82555000",
        description:"大连医科大学附属中山医院泌尿外科主任医师,擅长领域：泌尿系统疾病、尿路结石等",
      },
      { content: '陈珊珊教授',
        tabs: ['3'],
        image:logo,
        address:"辽宁省大连市沙河口区长春路9号",
        contact:"电话：0411-88530120",
        description:"大连医科大学附属第一医院妇产科主任,擅长领域：妇科肿瘤、子宫肌瘤等",
      },
      { content: '黄宏伟教授',
        tabs: ['11'],
        image:logo,
        address:"辽宁省大连市甘井子区黄河路464号",
        contact:"电话：0411-39625009",
        description:"大连市中心医院心血管内科主任,擅长领域：心血管疾病、高血压、冠心病等",
      },
      { content: '张鸿教授',
        tabs: ['34'],
        image:logo,
        address:"辽宁省大连市庄河市人民路60号",
        contact:"电话：0411-62822800。",
        description:"大连市儿童医院小儿外科主任,擅长领域：小儿外科疾病、先天性畸形等",
      },
      { content: '杨文权教授',
        tabs: ['10'],
        image:logo,
        address:"辽宁省大连市甘井子区东北路9号",
        contact:"电话：0411-39922777",
        description:"大连市中医院骨伤科主任医师,擅长领域：骨科损伤、骨关节疾病等。",
      },
      // ...more cards
    ]);
    let activeTab = ref('1');
    let activePage = ref(1);
    const pageSize = 5;

    const filteredCards = computed(()=>{
      if(activeTab.value.includes('all')){
        return  cards.value;
      }else{
        return cards.value.filter(card => {
          // return card.tabs.includes(activeTab.value) && card.filter === someCondition;
          return card.tabs.some(tab => activeTab.value.includes(tab));
        });
      }
    });

    const currentCards = computed(()=> {
      const start = (activePage.value - 1) * pageSize;
      return filteredCards.value.slice(start, start + pageSize);
    });

    const handlePageChange = (page)=>{
      activePage.value = page;
    };

    const searchText = ref('');

    const handleSearch = () => {
      // 处理搜索逻辑
      console.log('搜索：', searchText.value);
    };

    const handleClear = () => {
      searchText.value = '';
    };

    return {
      tabs,
      activeTab,
      cards,
      currentCards,
      pageSize,
      filteredCards,
      searchText,
      handleSearch,
      handleClear,
      handlePageChange}
  },

  mounted() {
    const scrollbarRef = this.$refs.scrollbarRef.$el;
    scrollbarRef.addEventListener("wheel", this.handleMouseWheel);
  },
  methods: {
    handleMouseWheel(event) {
      event.stopPropagation();
      event.preventDefault();

      const scrollbarWrapper = this.$refs.scrollbarRef.$el;
      const contentWrapper = scrollbarWrapper.querySelector(
          ".el-scrollbar__wrap"
      );

      const delta = Math.sign(event.deltaY) * 100;
      contentWrapper.scrollTop += delta;
    },
  },

}
</script>

<style>
.container {
  display: flex;
}

.tabsWrapper {
  width: 200px;
  margin-right: 10px;
}


.cardsWrapper {
  margin-left: 50px;
}

.scrollbar-wrapper {
  height: 400px;
  border-radius: 4px;
  overflow: hidden;
}

.box-card {
  width: 1000px;
  margin-top: 10px;
  transition: transform 0.3s;
}

.box-card:hover {
  transform: scale(1.05);
}

.card-content {
  display: flex;
}

.image-wrapper {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-wrapper {
  flex: 1;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  margin-left: 10px;
}

.card-metadata {
  font-size: 14px;
  color: #999;
  margin-left: 10px;
}

.search-wrapper {
  width: 500px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

</style>
